<template>
    <div class="grid-search">
      <!-- 左边标题 -->
      <div class="view-header">
        <div class="desc-text">
          <i class="el-icon-s-grid" />
          <span>{{ titleName }}</span>
        </div>
      </div>
      <!-- 右边form -->
      <div>
        <el-input
          v-if="isShowInput"
          v-model="form.WorkOrderCode"
          clearable
          style="width: 150px;"
          :placeholder="queryPlaceholder"
        />
        <slot name="queryCom"></slot>
        <el-button type="primary" style="margin-left: 10px" @click="queryChange">
          <i class="el-icon-search"></i>查询
        </el-button>
        <el-button type="success" style="margin-left: 10px" @click="queryChange"><i class="el-icon-refresh"></i>刷新</el-button>
        <slot name="btnCom"></slot>
      </div>
    </div>
</template>

<script>
export default {
  name: 'TitleSection',
  props: {
    titleName: {
      type: String,
      default: '完工单'
    },
    queryPlaceholder: {
      type: String,
      default: '工单编号或编码'
    },
    isShowInput: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
        form: {}
    }
  },
  methods: {
    queryChange () {
      this.$emit('query-change', this.form)
    }
  }
}
</script>

<style lang="less" scoped>
@import "../components/basic/ViewGrid/ViewGrid.less";
.grid-search {
  width: 100%;
  padding-top: 10px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px !important;
}
.view-header {
  padding-bottom: 0px !important;
  align-items: center;
}
.view-header .desc-text {
  padding-bottom: 5px !important;
}
</style>